<template>
    <div class="category-list"> 
        <ul>
            <li v-for="(item1,index) in title" :key="item1.id" 
            :class="{active1: index === currentIndex1}"
            @click="itemClicked(index)">
                <span>{{item1}}</span>
            </li>
        </ul>
    </div>
</template>

<script>


export default {
    name: 'CategoryList',
    props: {
        title: {
          type: Array,
          default() {
            return []
          }
        }
      },
    components: {
       
    },
    data() {
        return {
            currentIndex1: 0
          }
    },
    methods: {
        itemClicked(index) {
          this.currentIndex1 = index
          // 向home父组件传递点击的信息
          this.$emit('tabClick', index)
        }
    }

}
</script>

<style>
    .category-list {
        width: 90px;
        height: 100%;
        background-color: rgb(204, 233, 243);
    }
    .category-list ul li{
        line-height: 44px;
        height: 44px;
        text-align: center;
        
        /* border-right: 1px solid #000; */
        /* border-bottom: 1px solid #000; */
    }
    .active1 {
        background-color: rgb(245, 245, 245);
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
    }
    .active1 span{
    /* color: var(--color-high-text); */
    color: lightblue;
    /* border-bottom: 3px solid var(--color-tint); */
  }
</style>